<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../ohter/js库/mock.js"></script>
    <script src="../../ohter/js库/vue.js"></script>
    <title>伪元素选择器</title>
    <style>
        /* 
            可以利用css创建一个标签元素 而不需要html标签 从而简化html结构
            ::before 在父元素里面的前面插入内容
            ::after 在父元素里面的后面插入内容
            before和after必须有content属性 
            伪元素选择器的权重为1
            伪盒子是行内元素 不能直接设置大小
        */
        img {
            width: 100%;
            height: 100%;
            /* vertical-align: middle; */
        }
        div.before {
            width: 300px;
            height: 50px;
            background-color: palevioletred;

        }
        div.before::before {
            content: 'before';
            display: inline-block;
            width: 50px;
            height: 100px;
            background-color: yellow;
        }
        div.before::after {
            /* 必须写 */
            content: 'after';
            display: inline-block;
            width: 50px;
            height: 100px;
            background-color: yellow;

        }
        .before>img {
            width: 200px;
            height: 50px;
        }
        div.after {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        /* 
            伪元素使用场景
                 伪元素字体图标

        */
        div.ziti {
            width: 200px;
            height: 35px;
            border: 1px solid red;
            position: relative;
            top: 0;
            left: 0;
        }
        div.ziti::after {
            content: '\e91b';
           position: absolute;
           top: 15px;
           right: 10px;
           font-family: 'icomoon';
           color: red;
        }
        @font-face {
            font-family: 'icomoon';
            src: url('../../ohter/icomoon/fonts/icomoon.eot?qgproa');
            src: url('../../ohter/icomoon/fonts/icomoon.eot?qgproa#iefix') format('embedded-opentype'),
                url('../../ohter/icomoon/fonts/icomoon.ttf?qgproa') format('truetype'),
                url('../../ohter/icomoon/fonts/icomoon.woff?qgproa') format('woff'),
                url('../../ohter/icomoon/fonts/icomoon.svg?qgproa#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        /* 
        仿土豆效果
         */
         div.tudou {
            width: 300px;
            height: 300px;
            border: 1px  solid green;
           position: relative;
         }
     div.tudou:hover::before {
        content: '暂停';
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
       
        /* display: block; */
       }
    </style>
</head>

<body>
    <div id="root">
        <div class="tudou">
            
            <img src="../../ohter/picture/all.jpeg" alt="">
        </div>
        <div class="ziti">


        </div>
        <div class="before">
           
            <img src="../../ohter/picture/all.jpeg" alt="">
        </div>
        <div class="after">
            <img src="../../ohter/picture/all.jpeg" alt="">
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>